<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机骰子</title>
    <style>
        .box {
            width: 300px;
            height: 350px;
            margin: 100px auto;
            position: relative;
        }

        .pic {
            width: 100px;
            height: 100px;
        }

        .p1 {
            position: absolute;
            top: 50px;
            left: 100px;
        }

        .p2 {
            position: absolute;
            top: 180px;
            left: 40px;
        }

        .p3 {
            position: absolute;
            top: 180px;
            right: 40px;
        }

        img {
            width: 100%;
            height: 100%;
        }

        #btn {
            width: 100px;
            height: 30px;
            left: 100px;
            position: absolute;
            background-color: green;
            bottom: 0;
            z-index: 2;
            cursor: pointer;
        }

        p {
            width: 150px;
            height: 30px;
            position: absolute;
            margin-left: 100px;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 存放三个骰子 -->
        <div class="pic p1"><img src="img/6-point.png" alt=""></div>
        <div class="pic p2"><img src="img/6-point.png" alt=""></div>
        <div class="pic p3"><img src="img/6-point.png" alt=""></div>
        <!-- 按钮 -->
        <button id="btn" onClick="change()">摇一摇</button>
        <!-- 计算总数 -->
        <p id="text"></p>
    </div>
<script>
    //获取结构
    var pic = document.getElementsByTagName('img')
    var btn = document.getElementById('btn')
    var p = document.getElementById('text')
    //图片存放到数组中
    var dizhi = [
        'img/1-point.png',
        'img/2-point.png',
        'img/3-point.png',
        'img/4-point.png',
        'img/5-point.png',
        'img/6-point.png'
    ]
    //三个骰子和总数初始值为0
    var zhi1 = 0
    var zhi2 = 0
    var zhi3 = 0
    var sum = 0
    //声明一个变量t为定时器
    var t = null

    function change() {
        //点击摇一摇
        if (btn.innerText == '摇一摇') {
            t = setInterval(function () {
                //利用随机数获取骰子的值
                zhi1 = Math.floor(Math.random() * dizhi.length)
                zhi2 = Math.floor(Math.random() * dizhi.length)
                zhi3 = Math.floor(Math.random() * dizhi.length)
                //计算骰子总数
                sum = zhi1 + zhi2 + zhi3 + 3
                //将图片替换为对应的骰子点数
                pic[0].src = dizhi[zhi1]
                pic[1].src = dizhi[zhi2]
                pic[2].src = dizhi[zhi3]
                p.innerText = ''
                //按钮变为红色的停止按钮
                btn.innerText = '停止';
                btn.style.backgroundColor = 'red'
            }, 10)
        } else {
            clearInterval(t)
            //停止之后按钮变为原来样式，并且计算所得总数
            btn.innerText = '摇一摇';
            btn.style.backgroundColor = 'green'
            p.innerText = '所得的点数为：' + sum
        }
    }
</script>
</body>

</html>